var nameLine = [];
var valueLine = [];
var cols_arr = [];
var resized = false;
var myChart = null;

$(function() {
    searh();
    resizeWindow();
});

function resizeWindow() {
    if (resized) {
        return;
    }
    resized = true;
    window.setTimeout(function() {
        setPanelSize();
        resized = false;
    }, 100);
}

function setPanelSize() {
    $('#facItems').empty();

    var width = document.documentElement.clientWidth * 0.924 / 2;
    var height = document.documentElement.clientHeight * 0.856;

    $('#leftPanelDiv').css("width", (width - 10) + 'px');
    $('#leftPanelDiv').css("height", height + 'px');

    $('#rightPanelDiv').css("width", (width - 10) + 'px');
    $('#rightPanelDiv').css("height", height + 'px');

    $('#layout_table').css("width", width + 'px');
    $('#layout_table').css("height", height + 'px');

    $('#leftPanel').css("width", (width - 10) + 'px');
    $('#leftPanel').css("height", height + 'px');

    $('#rightPanel').css("width", (width - 10) + 'px');
    $('#rightPanel').css("height", height + 'px');

    showItems(width, height);
}

function searh() {
    cols_arr = [
        {FAC: '01', 'CODE':'G20191010005', 'TIME': 10, 'QTY': 24,'dayQty': 20},
        {FAC: '02', 'CODE':'G20191010006', 'TIME': 10, 'QTY': 24,'dayQty': 20},
        {FAC: '03', 'CODE':'G20191010007', 'TIME': 10, 'QTY': 24,'dayQty': 20},
        {FAC: '04', 'CODE':'G20191010008', 'TIME': 10, 'QTY': 24,'dayQty': 20},
        {FAC: '05', 'CODE':'G20191010009', 'TIME': 10, 'QTY': 24,'dayQty': 20}];

    renderTable(cols_arr);
}
function renderTable(cols_arr){
    if(cols_arr){
        var trHtml = [];
        for(var i in cols_arr) {
            trHtml.push("<tr>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].FAC + "</td>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].CODE + "</td>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].TIME + "</td>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].TIME + "</td>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].dayQty + "</td>");
            trHtml.push("</tr>");
        }
        trHtml = trHtml.join("");

        $("#addTr").after(trHtml);
    }
}
function showItems(width, height) {
    width = width / 7.3;

    for (var i = 0;i < 30;i ++) {
        $('#facItems').append('<div class="item" style="width: ' + width + 'px;height: ' + width + 'px;line-height: ' + width + 'px;">' +
            (i < 9 ? '0' + (i + 1) : (i + 1)) +
            '</div>');
    }
}